<template>
  <div id="main" style="height: 100%; width: 100%; margin: auto"></div>
</template>

<script>
import axios from "axios";
import Pinyin from "js-pinyin";
import { eventBus } from '../main'
// 主要信息  地图信息
export default {
  data() {
    return {
      data: [],
      dataList: [],
    };
  },
  methods: {
    initEchart() {
      const dataList = this.dataList;
      dataList.name = "";
      const _this = this;
      const myChart = echarts.init(document.getElementById("main"));
      const option = {
        tooltip: {
          // 数据格式化
          formatter: function (params) {
            return (
              params.name +
              "<br />" +
              "目前确诊：" +
              params.value +
              "<br />" +
              "累计确诊：" +
              params.data.confirm +
              "<br />" +
              "治愈人数:" +
              params.data.heal +
              "<br />" +
              "死亡人数:" +
              params.data.dead
            );
          },
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 取值范围的文字
          inRange: {
            color: ["#e0ffff", "red"], // 取值范围的颜色
          },
          show: true, // 图注
        },
        geo: {
          map: "china", // 引入地图数据
          roam: true, // 不开启缩放和平移
          zoom: 0, // 视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              // 高亮的显示设置
              areaColor: "skyblue", // 鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        // 鼠标悬浮提示框
        series: [
          {
            name: "省份",
            type: "map",
            geoIndex: 0,
            data: this.dataList,
          },
        ],
      };
      myChart.setOption(option);
      myChart.on("click", function (params) {
        eventBus.$emit('name', params.data.name)
      });
    },

    getData() {
      // 定时器
      setInterval(() => {
        axios.post("/cov/get_provinceData").then((res) => {
          const dataList = res.data;
          for (let i = 0; i < dataList.length; i++) {
            // 添加ename 转换拼音，转换小写
            const chars = Pinyin.getFullChars(dataList[i].name).toLowerCase();
            dataList[i].ename = chars;
          }
          this.dataList = dataList;

          this.initEchart();
        });
      }, 6000);
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
